<template>
  <a-table
    v-bind="tableProps"
  >
    <template #mode="mode">
      {{ mode | mode }}
    </template>
    <template #trigger="text, row">
      <a-switch :loading="tableLoading" checked-children="开" un-checked-children="关" :checked="text" @change="changeStatus(row)" />
    </template>
    <template #operation="text, row">
      <a v-auth="'modify_templates'" @click.prevent="handleRowTemplate(row)" v-if="row.action_type === 0">上传合同</a>
      <a v-auth="'modify_templates'" @click.prevent="handleRowTemplate(row)" v-else>编辑模板</a>
      <a class="check-record" @click.prevent="handlerViewRecords(row)">查看记录</a>
    </template>
  </a-table>
</template>
<script>
import { changeTemplateStatus, getMessages } from '@/api/flow/admin_message'
import table from '@/utils/mixins/search/table'

export default {
  mixins: [table],

  data () {
    return {
      columns: [
        {
          title: '模板名称',
          dataIndex: 'message_template_name',
          width: '200px',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '方式',
          dataIndex: 'mode',
          width: '60px',
          align: 'center',
          ellipsis: true,
          scopedSlots: { customRender: 'mode' },
        },
        {
          title: '触发条件',
          dataIndex: 'trigger',
          width: '60px',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '发送对象',
          dataIndex: 'send_object',
          width: '160px',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '自动触发',
          dataIndex: 'auto_switch',
          width: '160px',
          align: 'center',
          ellipsis: true,
          scopedSlots: { customRender: 'trigger' },
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '160px',
          scopedSlots: { customRender: 'operation' },
          fixed: 'right',
        },
      ],
    }
  },

  created () {
    this.tableHooksRequest()
  },

  filters: {
    mode (value) {
      return value === 0 ? '邮箱' : '短信'
    },
  },

  computed: {
    tableParams () {
      const { per_page, page } = this.pagination
      return [per_page, page, this.tableArgs]
    },
  },

  methods: {
    // 改变状态
    async changeStatus (row) {
      try {
        this.tableLoading = true

        await changeTemplateStatus(row.id)
        this.tableHooksRequest()
      } catch (error) {
        this.tableLoading = false
      }
    },

    // 编辑模板/上传合同
    handleRowTemplate({ id, mode }) {
      this.$router.push({
        name: 'NewsTemplate',
        params: { id, mode },
      })
    },

    // 查看记录
    handlerViewRecords ({ id, mode }) {
      this.$router.push({
        name: 'SendRecord',
        params: { id, mode },
      })
    },

     async tableHooksRequest () {
      try {
        const res = await this.getTableDatas(getMessages, this.tableParams)
        return res
      } catch (error) {
        throw new Error(error)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.check-record {
  margin-left: $margin-base;
}
</style>
